Skip to content

feat(react): add createMediaComponent - #2604

Draft
mihar-22 wants to merge 3 commits into
pr6a/create-media-elementfrom
pr6b/create-media-component
Draft

feat(react): add createMediaComponent#2604
mihar-22 wants to merge 3 commits into
pr6a/create-media-elementfrom
pr6b/create-media-component

Conversation

@mihar-22

@mihar-22 mihar-22 commented Sep 3, 2026 •
edited by cursor Bot
Loading

Copy link
Copy Markdown
Member

What this does

Adds createMediaComponent, the React façade factory, and builds every React media component with it except WistiaVideo and HlsBackgroundVideo.

import { HlsJsAdapter } from '@videojs/hlsjs-video';
import { createMediaComponent, type MediaComponentProps } from '@videojs/react';

export type HlsJsVideoProps = MediaComponentProps<typeof HlsJsAdapter>;

export const HlsJsVideo = createMediaComponent(
  HlsJsAdapter,
  ({ props, children, ref }) => (
    <video {...props} ref={ref}>
      {children}
    </video>
  ),
  { displayName: 'HlsJsVideo' }
);

Shape

createMediaComponent(Adapter, render, options?)

The render callback receives:

Arg What it is
adapter the adapter instance, already synced with this render's props
props the native attributes left after adapter props were synced onto the adapter
children children
ref attaches the adapter to the element it lands on and forwards the consumer's ref
initialProps frozen first-render adapter props, for values that must not change after mount (an embed's initial src)

Types follow from the adapter alone: the ref and native attributes come from its attach() target (MediaAdapterTarget), and the adapter props from its static defaultProps. No tag parameter, so iframe embeds and the Mux components (with their storyboard child) use the same factory.

Also

  • useAttachMedia accepts any element target; useAttachIframe is gone.
  • The media reference builder reads the target from the element the render callback returns and the defaults from the adapter, with a fixture and e2e assertion.
  • New createMediaComponent reference page.

Validation

Build, typecheck, lint, @videojs/react tests, builder e2e suite, site tests, regenerated media references.

🤖 Generated with Claude Code

Note

Medium Risk
Wide refactor across every media adapter and embed URL/mute behavior; public prop types change for several components, though behavior is covered by new tests and existing suites.

Overview
Introduces createMediaComponent, a shared factory that wires adapter instances into the Player (prop sync via useSyncProps, attach ref, frozen initialProps for embed URLs) and delegates rendering to a callback. createMediaComponent and related types are exported from @videojs/react.

Nearly all built-in React media components (HlsJsVideo, MuxVideo, iframe embeds, etc.) are rewritten to use the factory instead of duplicated forwardRef + hook boilerplate; WistiaVideo and HlsBackgroundVideo are unchanged. Component props are now MediaComponentProps<typeof Adapter> rather than hand-rolled interface merges (notably simplifying Mux variants).

useAttachIframe is removed; useAttachMedia is generalized to attach any target element (including iframes). The API docs builder detects createMediaComponent calls to infer React target tag and default props; there are unit tests for the factory and an updated reference doc page.

Reviewed by Cursor Bugbot for commit 890a13a. Bugbot is set up for automated code reviews on this repo. Configure here.

@vercel

vercel Bot commented Sep 3, 2026 •
edited
Loading

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated
v10-sandbox Ready Ready Preview Sep 8, 2026 12:57am UTC

Request Review

@mihar-22
mihar-22 force-pushed the pr6b/create-media-component branch from d56298a to 84cab08 Compare September 3, 2026 00:00
@pkg-pr-new

pkg-pr-new Bot commented Sep 3, 2026 •
edited
Loading

Copy link
Copy Markdown
@videojs/cdn

pnpm add https://pkg.pr.new/videojs/v10/@videojs/cdn@2604

@videojs/core

pnpm add https://pkg.pr.new/videojs/v10/@videojs/core@2604

@videojs/element

pnpm add https://pkg.pr.new/videojs/v10/@videojs/element@2604

@videojs/html

pnpm add https://pkg.pr.new/videojs/v10/@videojs/html@2604

@videojs/media

pnpm add https://pkg.pr.new/videojs/v10/@videojs/media@2604

@videojs/react

pnpm add https://pkg.pr.new/videojs/v10/@videojs/react@2604

@videojs/spf

pnpm add https://pkg.pr.new/videojs/v10/@videojs/spf@2604

@videojs/store

pnpm add https://pkg.pr.new/videojs/v10/@videojs/store@2604

@videojs/utils

pnpm add https://pkg.pr.new/videojs/v10/@videojs/utils@2604

@videojs/cloudflare-video

pnpm add https://pkg.pr.new/videojs/v10/@videojs/cloudflare-video@2604

@videojs/dash-video

pnpm add https://pkg.pr.new/videojs/v10/@videojs/dash-video@2604

@videojs/hlsjs-video

pnpm add https://pkg.pr.new/videojs/v10/@videojs/hlsjs-video@2604

@videojs/mux-audio

pnpm add https://pkg.pr.new/videojs/v10/@videojs/mux-audio@2604

@videojs/mux-video

pnpm add https://pkg.pr.new/videojs/v10/@videojs/mux-video@2604

@videojs/native-hls-video

pnpm add https://pkg.pr.new/videojs/v10/@videojs/native-hls-video@2604

@videojs/shaka-video

pnpm add https://pkg.pr.new/videojs/v10/@videojs/shaka-video@2604

@videojs/spotify-audio

pnpm add https://pkg.pr.new/videojs/v10/@videojs/spotify-audio@2604

@videojs/tiktok-video

pnpm add https://pkg.pr.new/videojs/v10/@videojs/tiktok-video@2604

@videojs/twitch-video

pnpm add https://pkg.pr.new/videojs/v10/@videojs/twitch-video@2604

@videojs/vimeo-video

pnpm add https://pkg.pr.new/videojs/v10/@videojs/vimeo-video@2604

@videojs/wistia-video

pnpm add https://pkg.pr.new/videojs/v10/@videojs/wistia-video@2604

@videojs/youtube-video

pnpm add https://pkg.pr.new/videojs/v10/@videojs/youtube-video@2604

@videojs/google-cast

pnpm add https://pkg.pr.new/videojs/v10/@videojs/google-cast@2604

@videojs/mux-data

pnpm add https://pkg.pr.new/videojs/v10/@videojs/mux-data@2604

commit: 009cc11

@github-actions

github-actions Bot commented Sep 3, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

📦 Bundle Size Report

🎨 @videojs/html — 30 small size changes
Path Base initial PR initial Initial diff Lazy diff
/video/minimal-skin.css 7.65 kB 7.68 kB +31 B (+0.4%) —
/video/skin.css 7.46 kB 7.50 kB +38 B (+0.5%) —
/video/minimal-skin 61.46 kB 61.55 kB +98 B (+0.2%) 0 B
/video/minimal-skin2 8.09 kB 8.15 kB +60 B (+0.7%) —
/video/skin 61.34 kB 61.31 kB -27 B (-0.0%) 0 B
/video/skin2 7.95 kB 8.00 kB +54 B (+0.7%) —
/audio/minimal-skin.css 5.53 kB 5.55 kB +29 B (+0.5%) —
/audio/skin.css 5.34 kB 5.37 kB +27 B (+0.5%) —
/audio/minimal-skin 45.77 kB 45.81 kB +40 B (+0.1%) 0 B
/audio/minimal-skin2 5.83 kB 5.88 kB +42 B (+0.7%) —
/audio/skin 45.50 kB 45.56 kB +70 B (+0.2%) 0 B
/audio/skin2 5.65 kB 5.69 kB +45 B (+0.8%) —
/live-video/minimal-skin.css 6.21 kB 6.23 kB +20 B (+0.3%) —
/live-video/skin.css 6.18 kB 6.20 kB +24 B (+0.4%) —
/live-video/minimal-skin 49.42 kB 49.39 kB -24 B (-0.0%) 0 B
/live-video/minimal-skin2 6.55 kB 6.58 kB +32 B (+0.5%) —
/live-video/skin 49.43 kB 49.40 kB -31 B (-0.1%) 0 B
/live-video/skin2 6.58 kB 6.61 kB +28 B (+0.4%) —
/live-audio/minimal-skin.css 4.39 kB 4.42 kB +31 B (+0.7%) —
/live-audio/skin.css 4.37 kB 4.39 kB +26 B (+0.6%) —
/live-audio/minimal-skin 35.43 kB 35.47 kB +40 B (+0.1%) 0 B
/live-audio/minimal-skin2 4.64 kB 4.68 kB +42 B (+0.9%) —
/live-audio/skin 35.36 kB 35.46 kB +107 B (+0.3%) 0 B
/live-audio/skin2 4.63 kB 4.66 kB +37 B (+0.8%) —
/video (default) 62.79 kB 62.82 kB +31 B (+0.0%) 0 B
/video (default + hls) 65.14 kB 65.15 kB +10 B (+0.0%) 0 B
/video (minimal) 63.04 kB 62.97 kB -67 B (-0.1%) 0 B
/video (minimal + hls) 65.44 kB 65.51 kB +73 B (+0.1%) 0 B
/audio (default) 46.99 kB 47.03 kB +43 B (+0.1%) 0 B
/audio (minimal) 47.21 kB 47.23 kB +27 B (+0.1%) 0 B
Presets (7)
Entry Initial Lazy
/video (default) 62.82 kB 56.87 kB
/video (default + hls) 65.15 kB 56.87 kB
/video (minimal) 62.97 kB 56.87 kB
/video (minimal + hls) 65.51 kB 56.87 kB
/audio (default) 47.03 kB 56.87 kB
/audio (minimal) 47.23 kB 56.87 kB
/background 11.57 kB 56.87 kB
Media (18)
Entry Initial
/media/mux-video 3.81 kB
/media/mux-audio 3.48 kB
/media/background-video 1.18 kB
/media/cloudflare-video 3.75 kB
/media/dash-video 3.41 kB
/media/hls-audio 22.82 kB
/media/hls-background-video 16.94 kB
/media/hls-video 28.77 kB
/media/hlsjs-video 3.42 kB
/media/mux-background-video 16.93 kB
/media/native-hls-video 8.34 kB
/media/shaka-video 3.41 kB
/media/spotify-audio 3.76 kB
/media/tiktok-video 3.81 kB
/media/twitch-video 3.80 kB
/media/vimeo-video 3.75 kB
/media/wistia-video 602 B
/media/youtube-video 3.75 kB
Players (5)
Entry Initial Lazy
/video/player 9.69 kB 56.87 kB
/audio/player 6.14 kB 56.87 kB
/background/player 4.46 kB 56.87 kB
/live-video/player 9.06 kB 56.87 kB
/live-audio/player 6.15 kB 56.87 kB
Skins (29)
Entry Type Initial Lazy
/video/minimal-skin.css css 7.68 kB —
/video/skin.css css 7.50 kB —
/video/minimal-skin js 61.55 kB 56.87 kB
/video/minimal-skin2 js 8.15 kB —
/video/skin js 61.31 kB 56.87 kB
/video/skin2 js 8.00 kB —
/audio/minimal-skin.css css 5.55 kB —
/audio/skin.css css 5.37 kB —
/audio/minimal-skin js 45.81 kB 56.87 kB
/audio/minimal-skin2 js 5.88 kB —
/audio/skin js 45.56 kB 56.87 kB
/audio/skin2 js 5.69 kB —
/background/skin.css css 139 B —
/background/skin js 9.81 kB 56.87 kB
/background/skin2 js 187 B —
/live-video/minimal-skin.css css 6.23 kB —
/live-video/skin.css css 6.20 kB —
/live-video/minimal-skin js 49.39 kB 56.87 kB
/live-video/minimal-skin2 js 6.58 kB —
/live-video/skin js 49.40 kB 56.87 kB
/live-video/skin2 js 6.61 kB —
/live-audio/minimal-skin.css css 4.42 kB —
/live-audio/skin.css css 4.39 kB —
/live-audio/minimal-skin js 35.47 kB 56.87 kB
/live-audio/minimal-skin2 js 4.68 kB —
/live-audio/skin js 35.46 kB 56.87 kB
/live-audio/skin2 js 4.66 kB —
/global.css css 190 B —
/shared.css css 118 B —
UI Components (62)
Entry Initial Lazy
/ui/airplay-button 11.26 kB 56.87 kB
/ui/alert-dialog 8.79 kB 56.87 kB
/ui/audio-track-radio-group 11.38 kB 56.87 kB
/ui/buffering-indicator 8.60 kB 56.87 kB
/ui/captions-button 11.51 kB 56.87 kB
/ui/captions-radio-group 11.45 kB 56.87 kB
/ui/cast-button 11.25 kB 56.87 kB
/ui/container 9.47 kB 56.87 kB
/ui/controls 8.77 kB 56.87 kB
/ui/controls-backdrop 1.69 kB 56.87 kB
/ui/controls-content 1.67 kB 56.87 kB
/ui/dialog 8.73 kB 56.87 kB
/ui/dialog-backdrop 1.70 kB 56.87 kB
/ui/dialog-close 2.06 kB 56.87 kB
/ui/dialog-description 1.69 kB 56.87 kB
/ui/dialog-popup 1.90 kB 56.87 kB
/ui/dialog-title 1.70 kB 56.87 kB
/ui/error-dialog 12.38 kB 56.87 kB
/ui/fullscreen-button 11.26 kB 56.87 kB
/ui/gesture 9.57 kB 56.87 kB
/ui/hotkey 9.97 kB 56.87 kB
/ui/live-button 9.74 kB 56.87 kB
/ui/menu 18.45 kB 56.87 kB
/ui/menu-checkbox-item 1.97 kB 56.87 kB
/ui/menu-content 7.52 kB 56.87 kB
/ui/menu-group 2.09 kB 56.87 kB
/ui/menu-group-label 1.64 kB —
/ui/menu-item 2.29 kB 56.87 kB
/ui/menu-item-indicator 1.37 kB 56.87 kB
/ui/menu-radio-group 3.01 kB 56.87 kB
/ui/menu-radio-item 2.13 kB 56.87 kB
/ui/menu-separator 1.30 kB 56.87 kB
/ui/mute-button 11.28 kB 56.87 kB
/ui/pip-button 11.22 kB 56.87 kB
/ui/play-button 11.22 kB 56.87 kB
/ui/playback-rate-button 11.32 kB 56.87 kB
/ui/playback-rate-radio-group 11.38 kB 56.87 kB
/ui/popover 8.57 kB 56.87 kB
/ui/poster 8.67 kB 56.87 kB
/ui/quality-radio-group 11.97 kB 56.87 kB
/ui/seek-button 11.27 kB 56.87 kB
/ui/seek-indicator 12.69 kB 56.87 kB
/ui/seek-indicator-value 1.10 kB —
/ui/slider 11.65 kB 56.87 kB
/ui/slider-preview 2.01 kB 56.87 kB
/ui/status-announcer 10.60 kB 56.87 kB
/ui/status-indicator 13.01 kB 56.87 kB
/ui/status-indicator-value 1.10 kB —
/ui/thumbnail 9.84 kB 56.87 kB
/ui/time 10.80 kB 56.87 kB
/ui/time-slider 12.99 kB 56.87 kB
/ui/time-slider-chapter-title 8.79 kB 56.87 kB
/ui/time-slider-chapters 9.63 kB 56.87 kB
/ui/title 8.17 kB 56.87 kB
/ui/tooltip 9.95 kB 56.87 kB
/ui/tooltip-label 1.21 kB —
/ui/tooltip-shortcut 1.18 kB —
/ui/volume-indicator 13.02 kB 56.87 kB
/ui/volume-indicator-fill 1.11 kB —
/ui/volume-indicator-value 1.10 kB —
/ui/volume-popover 14.74 kB 56.87 kB
/ui/volume-slider 12.31 kB 56.87 kB
⚛️ @videojs/react — 24 small size changes
Path Base initial PR initial Initial diff Lazy diff
/extensions/google-cast 1.61 kB 1.61 kB +3 B (+0.2%) —
/extensions/mux-data 1.65 kB 1.67 kB +15 B (+0.9%) —
/media/mux-video/hls-js 958 B 1.02 kB +84 B (+8.8%) —
/media/mux-video/spf 961 B 1.02 kB +87 B (+9.1%) —
/media/mux-audio/hls-js 699 B 777 B +78 B (+11.2%) —
/media/mux-audio/spf 703 B 783 B +80 B (+11.4%) —
/media/cloudflare-video 911 B 981 B +70 B (+7.7%) —
/media/dash-video 693 B 772 B +79 B (+11.4%) —
/media/hls-audio 20.36 kB 20.45 kB +95 B (+0.5%) —
/media/hls-video 26.41 kB 26.53 kB +121 B (+0.4%) —
/media/hlsjs-video 695 B 775 B +80 B (+11.5%) —
/media/mux-audio 693 B 771 B +78 B (+11.3%) —
/media/mux-video 950 B 1.00 kB +76 B (+8.0%) —
/media/native-hls-video 5.90 kB 5.98 kB +79 B (+1.3%) —
/media/shaka-video 704 B 775 B +71 B (+10.1%) —
/media/spotify-audio 901 B 977 B +76 B (+8.4%) —
/media/tiktok-video 906 B 982 B +76 B (+8.4%) —
/media/twitch-video 929 B 1005 B +76 B (+8.2%) —
/media/vimeo-video 888 B 955 B +67 B (+7.5%) —
/media/youtube-video 897 B 964 B +67 B (+7.5%) —
/video/minimal-skin.css 7.52 kB 7.53 kB +8 B (+0.1%) —
/video/skin.css 7.34 kB 7.35 kB +11 B (+0.1%) —
/video (default + hls) 50.83 kB 50.89 kB +60 B (+0.1%) 0 B
/video (minimal + hls) 51.06 kB 51.02 kB -37 B (-0.1%) 0 B
Presets (7)
Entry Initial Lazy
/video (default) 50.61 kB 56.87 kB
/video (default + hls) 50.89 kB 56.87 kB
/video (minimal) 50.66 kB 56.87 kB
/video (minimal + hls) 51.02 kB 56.87 kB
/audio (default) 39.50 kB 56.87 kB
/audio (minimal) 39.56 kB 56.87 kB
/background 581 B 56.87 kB
Media (22)
Entry Initial
/media/mux-video/hls-js 1.02 kB
/media/mux-video/spf 1.02 kB
/media/mux-audio/hls-js 777 B
/media/mux-audio/spf 783 B
/media/background-video 402 B
/media/cloudflare-video 981 B
/media/dash-video 772 B
/media/hls-audio 20.45 kB
/media/hls-background-video 16.40 kB
/media/hls-video 26.53 kB
/media/hlsjs-video 775 B
/media/mux-audio 771 B
/media/mux-background-video 16.47 kB
/media/mux-video 1.00 kB
/media/native-hls-video 5.98 kB
/media/shaka-video 775 B
/media/spotify-audio 977 B
/media/tiktok-video 982 B
/media/twitch-video 1005 B
/media/vimeo-video 955 B
/media/wistia-video 619 B
/media/youtube-video 964 B
Extensions (2)
Entry Initial
/extensions/google-cast 1.61 kB
/extensions/mux-data 1.67 kB
Players (5)
Entry Initial Lazy
/video/player 7.56 kB 56.87 kB
/audio/player 4.00 kB 56.87 kB
/background/player 2.27 kB 56.87 kB
/live-video/player 6.95 kB 56.87 kB
/live-audio/player 3.99 kB 56.87 kB
Skins (18)
Entry Type Initial Lazy
/video/minimal-skin.css css 7.53 kB —
/video/skin.css css 7.35 kB —
/video/minimal-skin js 50.63 kB 56.87 kB
/video/skin js 50.50 kB 56.87 kB
/audio/minimal-skin.css css 5.37 kB —
/audio/skin.css css 5.18 kB —
/audio/minimal-skin js 39.46 kB 56.87 kB
/audio/skin js 39.40 kB 56.87 kB
/background/skin.css css 90 B —
/background/skin js 277 B —
/live-video/minimal-skin.css css 6.07 kB —
/live-video/skin.css css 6.05 kB —
/live-video/minimal-skin js 42.57 kB 56.87 kB
/live-video/skin js 42.52 kB 56.87 kB
/live-audio/minimal-skin.css css 4.24 kB —
/live-audio/skin.css css 4.21 kB —
/live-audio/minimal-skin js 30.35 kB 56.87 kB
/live-audio/skin js 30.36 kB 56.87 kB
UI Components (39)
Entry Initial Lazy
/ui/airplay-button 10.45 kB 56.87 kB
/ui/alert-dialog 4.73 kB 56.87 kB
/ui/audio-track 7.92 kB 56.87 kB
/ui/audio-track-radio-group 9.48 kB 56.87 kB
/ui/buffering-indicator 7.79 kB 56.87 kB
/ui/captions-button 10.43 kB 56.87 kB
/ui/captions-radio-group 9.59 kB 56.87 kB
/ui/cast-button 10.43 kB 56.87 kB
/ui/controls 7.71 kB 56.87 kB
/ui/dialog 4.75 kB 56.87 kB
/ui/error-dialog 11.80 kB 56.87 kB
/ui/fullscreen-button 10.39 kB 56.87 kB
/ui/gesture 7.98 kB 56.87 kB
/ui/hotkey 8.38 kB 56.87 kB
/ui/live-button 8.80 kB 56.87 kB
/ui/menu 19.45 kB 56.87 kB
/ui/mute-button 10.44 kB 56.87 kB
/ui/pip-button 10.39 kB 56.87 kB
/ui/play-button 10.37 kB 56.87 kB
/ui/playback-rate 7.99 kB 56.87 kB
/ui/playback-rate-button 10.37 kB 56.87 kB
/ui/playback-rate-radio-group 9.53 kB 56.87 kB
/ui/popover 8.16 kB 56.87 kB
/ui/poster 7.57 kB 56.87 kB
/ui/quality 8.42 kB 56.87 kB
/ui/quality-radio-group 9.96 kB 56.87 kB
/ui/seek-button 10.41 kB 56.87 kB
/ui/seek-indicator 11.98 kB 56.87 kB
/ui/slider 12.74 kB 56.87 kB
/ui/status-announcer 10.10 kB 56.87 kB
/ui/status-indicator 12.29 kB 56.87 kB
/ui/thumbnail 8.73 kB 56.87 kB
/ui/time 9.77 kB 56.87 kB
/ui/time-slider 14.17 kB 56.87 kB
/ui/title 7.28 kB 56.87 kB
/ui/tooltip 8.93 kB 56.87 kB
/ui/volume-indicator 12.34 kB 56.87 kB
/ui/volume-popover 14.20 kB 56.87 kB
/ui/volume-slider 12.13 kB 56.87 kB
🧩 @videojs/core — no changes
Entries (76)
Entry Initial Lazy
. 13.15 kB —
/dom 22.53 kB 56.87 kB
/vjsc 1.82 kB —
/i18n 3.23 kB 56.87 kB
/i18n/locales/all 34.97 kB —
/i18n/locales/ar 1.22 kB —
/i18n/locales/az 1.09 kB —
/i18n/locales/bg 1.29 kB —
/i18n/locales/bn 1.23 kB —
/i18n/locales/bs 1.00 kB —
/i18n/locales/ca 1.07 kB —
/i18n/locales/cs 1.07 kB —
/i18n/locales/cy 1.02 kB —
/i18n/locales/da 1006 B —
/i18n/locales/de 1.09 kB —
/i18n/locales/el 1.49 kB —
/i18n/locales/en 785 B —
/i18n/locales/es 1018 B —
/i18n/locales/et 1.05 kB —
/i18n/locales/eu 1.03 kB —
/i18n/locales/fa 1.22 kB —
/i18n/locales/fi 1.04 kB —
/i18n/locales/fr 1.07 kB —
/i18n/locales/gd 1.10 kB —
/i18n/locales/gl 1022 B —
/i18n/locales/he 1.14 kB —
/i18n/locales/hi 1.30 kB —
/i18n/locales/hr 1.02 kB —
/i18n/locales/hu 1.10 kB —
/i18n/locales/id 919 B —
/i18n/locales/it 1.01 kB —
/i18n/locales/ja 1.18 kB —
/i18n/locales/ko 1.14 kB —
/i18n/locales/lt 1.02 kB —
/i18n/locales/lv 1.09 kB —
/i18n/locales/mr 1.30 kB —
/i18n/locales/nb 987 B —
/i18n/locales/ne 1.29 kB —
/i18n/locales/nl 1.00 kB —
/i18n/locales/nn 987 B —
/i18n/locales/oc 1.08 kB —
/i18n/locales/pl 1.14 kB —
/i18n/locales/pt 1.03 kB —
/i18n/locales/pt-BR 1.03 kB —
/i18n/locales/pt-PT 1.01 kB —
/i18n/locales/ro 1.07 kB —
/i18n/locales/ru 1.40 kB —
/i18n/locales/sk 1.10 kB —
/i18n/locales/sl 1.04 kB —
/i18n/locales/sr 1.07 kB —
/i18n/locales/sv 1.01 kB —
/i18n/locales/te 1.32 kB —
/i18n/locales/th 1.29 kB —
/i18n/locales/tr 1.08 kB —
/i18n/locales/uk 1.41 kB —
/i18n/locales/vi 1.11 kB —
/i18n/locales/zh 1.02 kB —
/i18n/locales/zh-CN 1.02 kB —
/i18n/locales/zh-TW 1.02 kB —
/i18n/text/airplay 101 B —
/i18n/text/buttons 137 B —
/i18n/text/captions 93 B —
/i18n/text/cast 114 B —
/i18n/text/common 90 B —
/i18n/text/container 75 B —
/i18n/text/errors 285 B —
/i18n/text/fullscreen 98 B —
/i18n/text/live 126 B —
/i18n/text/menu 249 B —
/i18n/text/pip 101 B —
/i18n/text/playback 80 B —
/i18n/text/seek 105 B —
/i18n/text/slider 65 B —
/i18n/text/status 222 B —
/i18n/text/time 280 B —
/i18n/text/volume 133 B —
🏷️ @videojs/element — no changes
Entries (2)
Entry Initial
. 1.05 kB
/context 943 B
📦 @videojs/store — no changes
Entries (3)
Entry Initial
. 1.72 kB
/html 703 B
/react 365 B
🔧 @videojs/utils — no changes
Entries (13)
Entry Initial
/array 271 B
/dom 5.02 kB
/events 320 B
/function 386 B
/i18n 249 B
/jwt 176 B
/object 535 B
/predicate 297 B
/percent 281 B
/string 239 B
/style 212 B
/time 976 B
/number 199 B
📦 @videojs/cdn — no changes
📦 @videojs/cloudflare-video — no changes
📦 @videojs/dash-video — no changes
📦 @videojs/google-cast — no changes
📦 @videojs/hlsjs-video — no changes
📦 @videojs/media — no changes
Entries (3)
Entry Initial
. 1.14 kB
/dom 5.02 kB
/media-tracks 2.05 kB
📦 @videojs/mux — no changes
📦 @videojs/mux-audio — no changes
Entries (2)
Entry Initial
. 135.78 kB
/spf 20.82 kB
📦 @videojs/mux-data — no changes
📦 @videojs/mux-video — no changes
Entries (2)
Entry Initial
. 135.73 kB
/spf 26.86 kB
📦 @videojs/native-hls-video — no changes
📦 @videojs/shaka-video — no changes
📦 @videojs/spf — no changes
Entries (7)
Entry Initial
. 4.55 kB
/dom 6.60 kB
/hls 22.06 kB
/media-tracks 504 B
/hls-background-video 15.84 kB
/hls-audio 19.90 kB
/hls-video 25.99 kB
📦 @videojs/spotify-audio — no changes
📦 @videojs/tiktok-video — no changes
📦 @videojs/twitch-video — no changes
📦 @videojs/vimeo-video — no changes
📦 @videojs/wistia-video — no changes
Entries (2)
Entry Initial
. 1.92 kB
/helpers 1.77 kB
📦 @videojs/youtube-video — no changes
ℹ️ How to interpret

Each entry is independently bundled, minified, and brotli-compressed. Initial size includes its static import graph; lazy dynamic chunks are reported separately.

Entries are not additive because their dependency graphs overlap. Preset rows represent realistic combined bundles.

Changes of 300 B or less across initial, lazy, and total size are collapsed, not discarded.

Run pnpm size locally to check current initial sizes.

@mihar-22
mihar-22 marked this pull request as draft September 3, 2026 00:04
@netlify

netlify Bot commented Sep 3, 2026 •
edited
Loading

Copy link
Copy Markdown

✅ Deploy Preview for vjs10-site ready!

Name Link
🔨 Latest commit 009cc11
🔍 Latest deploy log https://app.netlify.com/projects/vjs10-site/deploys/6a9f5d2a28ca670007965b18
😎 Deploy Preview https://deploy-preview-2604--vjs10-site.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

@mihar-22
mihar-22 force-pushed the pr6b/create-media-component branch from 84cab08 to 7c1d2e6 Compare September 3, 2026 03:19
@mihar-22 mihar-22 mentioned this pull request Sep 3, 2026
Merged
@mihar-22
mihar-22 force-pushed the pr6b/create-media-component branch from 7c1d2e6 to e155a0c Compare September 3, 2026 04:13
@mihar-22
mihar-22 force-pushed the pr6b/create-media-component branch from e155a0c to 46f504b Compare September 3, 2026 05:34
@mihar-22
mihar-22 force-pushed the pr6b/create-media-component branch from 46f504b to fa437f8 Compare September 3, 2026 06:08
@mihar-22
mihar-22 force-pushed the pr6b/create-media-component branch from fa437f8 to 3601865 Compare September 3, 2026 06:19
@mihar-22
mihar-22 force-pushed the pr6b/create-media-component branch from 3601865 to 3e68162 Compare September 3, 2026 06:31
@mihar-22
mihar-22 force-pushed the pr6b/create-media-component branch from 3e68162 to b81d177 Compare September 3, 2026 06:40
@mihar-22
mihar-22 force-pushed the pr6b/create-media-component branch from 657b514 to 30e54dc Compare September 3, 2026 21:11
cursor[bot]
cursor Bot reviewed Sep 3, 2026
View reviewed changes

@cursor cursor Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cursor Bugbot has reviewed your changes using default effort and found 1 potential issue.

Fix All in Cursor

❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.

Reviewed by Cursor Bugbot for commit 30e54dc. Configure here.

Comment thread packages/react/src/media/twitch-video/adapter.tsx
@mihar-22
mihar-22 force-pushed the pr6b/create-media-component branch from 30e54dc to 4ff3522 Compare September 3, 2026 22:13
@mihar-22
mihar-22 force-pushed the pr6b/create-media-component branch from 4ff3522 to 06d6e5d Compare September 3, 2026 22:29
@mihar-22
mihar-22 force-pushed the pr6b/create-media-component branch from 06d6e5d to c3cff2f Compare September 7, 2026 03:21
@netlify

netlify Bot commented Sep 7, 2026 •
edited
Loading

Copy link
Copy Markdown

✅ Deploy Preview for vjs-registry canceled.

Name Link
🔨 Latest commit c3cff2f
🔍 Latest deploy log https://app.netlify.com/projects/vjs-registry/deploys/6a9e2db4430b8f000824f264

@netlify

netlify Bot commented Sep 7, 2026 •
edited
Loading

Copy link
Copy Markdown

✅ Deploy Preview for vjs-registry ready!

Name Link
🔨 Latest commit 009cc11
🔍 Latest deploy log https://app.netlify.com/projects/vjs-registry/deploys/6a9f5d2a807f7d00082a8646
😎 Deploy Preview https://deploy-preview-2604--vjs-registry.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

@mihar-22
mihar-22 force-pushed the pr6b/create-media-component branch from c3cff2f to 890a13a Compare September 7, 2026 03:58
@mihar-22
mihar-22 marked this pull request as draft September 7, 2026 04:24
@mihar-22
mihar-22 force-pushed the pr6b/create-media-component branch from 890a13a to 9c3e27b Compare September 7, 2026 04:28
@mihar-22
mihar-22 force-pushed the pr6b/create-media-component branch from 9c3e27b to 5e8a81d Compare September 7, 2026 04:46
@mihar-22
mihar-22 force-pushed the pr6b/create-media-component branch from 5e8a81d to 3065f9b Compare September 7, 2026 05:06
@mihar-22
mihar-22 force-pushed the pr6b/create-media-component branch from 3065f9b to 75c3a60 Compare September 7, 2026 05:49
mihar-22 and others added 3 commits September 7, 2026 17:55
@mihar-22 @claude
feat(react): add createMediaComponent
d384db1 
`createMediaComponent(tag, Adapter, options?)` builds a component that renders
a native `<video>` or `<audio>`, drives it through one adapter instance, syncs
the adapter's props from React props against `Adapter.defaultProps`, forwards
everything else (and the ref) to the element, and registers with the Player.
The six built-in components that followed that exact shape now use it.

The media reference builder reads the target and defaults straight from the
factory call, so those components keep their generated React prop tables.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
@mihar-22 @claude
fix(react): type media component targets from the adapter host
d10d972 
Inferring the element from `attach()` mistyped the SPF adapters, whose
mixins take an `HTMLMediaElement`, as audio, and the hls.js
`MuxAudioAdapter` as video. The adapter's static `host` names the element
directly.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
@mihar-22 @claude
refactor(react): read the media target off a literal host
009cc11 
Every adapter's `host` is a literal now, so the non-distributive check for
the video union is gone.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@cursor cursor[bot] cursor[bot] left review comments
@luwes luwes Awaiting requested review from luwes

At least 1 approving review is required to merge this pull request.

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@mihar-22